<template>
  <div
    ref="cardItemRef"
    class="card-item">
    <div
      class="popup-title"
      v-if="props.isPopup">
      <div class="title-text">详情</div>
      <div class="title-btn">X</div>
    </div>
    <div class="card-img">
      <div class="cover-img">
        <img
          :src="cardCoverInfo.imageUrl"
          alt="" />
      </div>
      <div
        v-if="!props.isPopup"
        class="img-icon"
        @mouseenter="viewPicFlag = true"
        @mouseleave="viewPicFlag = false">
        <img
          :src="viewPicFlag ? viewPicHoverIcon : viewPicIcon"
          alt=""
          @click="viewLargePic" />
      </div>
      <div
        class="check-box"
        v-if="!props.isPopup">
        <el-checkbox
          @change="selectPicItem"
          v-model="isSelect"
          label="" />
      </div>
    </div>
    <div class="time">
      <span>{{ cardCoverInfo.timestamp }}</span>
      <span>相似度</span>
      <span>{{ (cardCoverInfo.cosine * 100).toFixed(2) }}%</span>
      <img
        class="poly-img-btn"
        v-if="props.polyFlag"
        @mouseenter="picsFlag = true"
        @mouseleave="picsFlag = false"
        :src="picsFlag ? picsHover : pics"
        alt=""
        @click="viewPolyImgList" />
    </div>
    <div class="device-location">
      <span>设备位置</span>
      <span>{{ cardCoverInfo.location }}</span>
    </div>
    <div
      class="feedback"
      v-if="!props.isPopup">
      <div>反馈</div>
      <div>
        <el-radio-group
          v-model="feedback"
          @change="changeFeedback">
          <el-radio :value="1">准确</el-radio>
          <el-radio :value="0">不准确</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div
      class="text-area"
      v-if="feedback === 0 && !props.isPopup">
      <div class="title">
        <div>建议描述</div>
        <div
          @click="editDescription"
          v-if="!editFlag && isSubmitFalse">
          编辑
        </div>
      </div>
      <el-input
        v-if="!isSubmitFalse || editFlag"
        v-model="textarea"
        maxlength="15"
        :autosize="{ minRows: 3, maxRows: 3 }"
        show-word-limit
        type="textarea"
        placeholder="输入建议..." />
      <div v-else>{{ textarea }}</div>
    </div>
    <div
      class="btn-group"
      v-if="(feedback === 0 && editFlag && !props.isPopup) || (feedback === 0 && !isSubmitFalse && !props.isPopup)">
      <el-button
        style="margin-left: calc(8 / 1080 * 100vw)"
        type="primary"
        @click="handleSearchFeedback"
        :disabled="loadingStatus"
        >提交</el-button
      >
    </div>
    <!-- </div> -->
  </div>
  <el-dialog
    v-model="picDialogVisible"
    width="auto"
    destroy-on-close
    align-center
    title="图片">
    <div class="pic-dialog">
      <div class="img-content">
        <img
          :src="cardCoverInfo.imageUrl"
          alt="" />
      </div>
    </div>
  </el-dialog>
  <el-dialog
    v-model="mapDialogVisible"
    width="auto"
    destroy-on-close
    align-center
    title="位置">
    <div class="pic-dialog">
      <div class="img-content">
        <div
          class="map-container"
          id="cardMap"></div>
      </div>
    </div>
  </el-dialog>
  <el-dialog
    v-model="polyImgDialogVisible"
    width="auto"
    destroy-on-close
    align-center
    title="多图聚合">
    <div class="poly-pic-dialog">
      <div class="img-wrapper">
        <div class="img-content">
          <img
            :src="polyImgsList[currentImgIndex].imageUrl"
            alt="" />
        </div>
        <div class="img-list">
          <div
            class="img-scroll"
            :class="{ 'no-hover': currentImgIndex === 0 }"
            :style="{ cursor: currentImgIndex === 0 ? 'not-allowed' : 'pointer' }"
            @click="scrollUpImgList">
            <el-icon size="16"><ArrowUp /></el-icon>
          </div>
          <div class="imgs">
            <div class="imgs-list-wrapper">
              <div
                class="img-item"
                @click="changeCurrentImg(index)"
                v-for="(item, index) in polyImgsList"
                :key="item.id">
                <img
                  :src="item.imageUrl"
                  alt="" />
                <div
                  class="img-border"
                  v-if="index === currentImgIndex"></div>
              </div>
            </div>
          </div>
          <div
            class="img-scroll"
            :class="{ 'no-hover': currentImgIndex === polyImgsList.length - 1 }"
            :style="{ cursor: currentImgIndex === polyImgsList.length - 1 ? 'not-allowed' : 'pointer' }"
            @click="scrollDownImgList">
            <el-icon size="16"><ArrowDown /></el-icon>
          </div>
        </div>
      </div>
      <div class="img-info">
        <div class="time">
          <span>{{ currentImgInfo.timestamp }}</span>
          <span>相似度</span>
          <span>{{ (currentImgInfo.cosine * 100).toFixed(2) }}%</span>
        </div>
        <div class="device-location">
          <span>设备位置</span>
          <span>{{ currentImgInfo.location }}</span>
        </div>
        <div class="feedback">
          <div>反馈</div>
          <div>
            <el-radio-group
              v-model="currentImgState.feedback"
              @change="changeCurrentImgFeedback">
              <el-radio :value="1">准确</el-radio>
              <el-radio :value="0">不准确</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div
          class="text-area"
          v-if="currentImgState.feedback === 0">
          <div class="title">
            <div>建议描述</div>
            <div
              @click="editCurrentImgDescription"
              v-if="!currentImgState.editFlag && currentImgState.isSubmitFalse">
              编辑
            </div>
          </div>
          <el-input
            v-if="!currentImgState.isSubmitFalse || currentImgState.editFlag"
            v-model="currentImgState.textarea"
            :autosize="{ minRows: 3, maxRows: 3 }"
            type="textarea"
            placeholder="输入建议..." />
          <div v-else>{{ currentImgState.textarea }}</div>
        </div>
      </div>
      <div
        class="btn-group"
        v-if="(currentImgState.feedback === 0 && currentImgState.editFlag) || (currentImgState.feedback === 0 && !currentImgState.isSubmitFalse)">
        <el-button
          style="margin-left: calc(8 / 1080 * 100vw)"
          type="primary"
          @click="handleCurrentImgSearchFeedback"
          :disabled="loadingStatus"
          >提交</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
  import { getCurrentInstance, ref, reactive, computed, onMounted, onBeforeUpdate, watch } from 'vue'
  import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
  import viewPicIcon from '@/assets/img/page/viewPic.png'
  import viewPicHoverIcon from '@/assets/img/page/viewPicHover.png'
  import locationIcon from '@/assets/img/page/location.png'
  import pics from '@/assets/img/page/pics.png'
  import picsHover from '@/assets/img/page/picsHover.png'
  import markerIcon from '@/assets/img/page/marker.png'
  import tipMessage from '@/utils/tipMessage'

  const emit = defineEmits(['selectPicItem'])
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    cardInfo: {
      type: Object,
      default: {}
    },
    // searchText: {
    //   type: String,
    //   default: ''
    // },
    // feedbackVector: {
    //   type: String,
    //   default: ''
    // },
    searchPkId: {
      type: [String, Number],
      default: ''
    },
    allSelectedFlag: {
      type: Boolean,
      default: false
    },
    isPopup: {
      type: Boolean,
      default: false
    },
    polyFlag: {
      type: Boolean,
      default: false
    }
  })
  const feedback = ref('')
  const textarea = ref('')
  const picDialogVisible = ref(false)
  const mapDialogVisible = ref(false)
  const loadingStatus = ref(false)
  const editFlag = ref(false)
  const viewPicFlag = ref(false)
  const picsFlag = ref(false)
  const isSelect = ref(false)
  const polyImgDialogVisible = ref(false)
  const isSubmitFalse = ref(false) //反馈不准确的成功flag
  // txMap地图对象
  const txMapObject = {
    darkMapObj: null,
    mapCenter: [],
    marker: null
  }
  // 卡片封面信息，根据是否聚合两者字段有差异
  const cardCoverInfo = computed(() => {
    if (props.polyFlag) {
      return props.cardInfo.result[0]
    } else {
      return props.cardInfo
    }
  })
  const polyImgsList = computed(() => {
    if (props.polyFlag) {
      return props.cardInfo.result
    } else {
      return []
    }
  })
  const currentImgIndex = ref(0)
  const currentImgInfo = ref()
  const currentImgState = reactive({
    isSubmitFalse: false,
    feedback: '',
    textarea: '',
    editFlag: false
  })
  const cardItemRef = ref(null)
  /* ========方法======== */
  const viewLargePic = () => {
    picDialogVisible.value = true
  }
  const editDescription = () => {
    editFlag.value = true
  }
  const editCurrentImgDescription = () => {
    currentImgState.editFlag = true
  }
  const changeFeedback = val => {
    if (val) {
      handleSearchFeedback()
    }
    textarea.value = ''
  }
  const changeCurrentImgFeedback = val => {
    if (val) {
      handleCurrentImgSearchFeedback()
    }
    currentImgState.textarea = ''
  }
  const handleSearchFeedback = async () => {
    try {
      loadingStatus.value = true
      const params = {
        searchPkId: props.searchPkId,
        vectorId: cardCoverInfo.value.id,
        isAccurate: feedback.value,
        suggestedDescription: textarea.value
      }
      const res = await proxy.$http.postWithBody('analysis/searchFeedback', params)
      if (res) {
        // emit('refreshList')
        tipMessage('反馈成功！', 'success')
        feedback.value === 0 ? (isSubmitFalse.value = true) : (isSubmitFalse.value = false)
        loadingStatus.value = false
        editFlag.value = false
      }
    } catch (error) {
      console.log(error)
      loadingStatus.value = false
      editFlag.value = true
    }
  }
  const handleCurrentImgSearchFeedback = async () => {
    try {
      loadingStatus.value = true
      const params = {
        searchPkId: props.searchPkId,
        vectorId: currentImgInfo.value.id,
        isAccurate: currentImgState.feedback,
        suggestedDescription: currentImgState.textarea
      }
      const res = await proxy.$http.postWithBody('analysis/searchFeedback', params)
      if (res) {
        // emit('refreshList')
        tipMessage('反馈成功！', 'success')
        currentImgState.feedback === 0 ? (currentImgState.isSubmitFalse = true) : (currentImgState.isSubmitFalse = false)
        loadingStatus.value = false
        currentImgState.editFlag = false
      }
    } catch (error) {
      console.log(error)
      loadingStatus.value = false
      currentImgState.editFlag = true
    }
  }
  const quitEditMode = () => {
    editFlag.value = false
    feedback.value = props.cardInfo.isAccurate
    textarea.value = props.cardInfo.suggestedDescription
  }
  const viewPolyImgList = () => {
    polyImgDialogVisible.value = true
    currentImgInfo.value = polyImgsList.value[0]
    initCurrentImgState()
  }
  const selectPicItem = isSelected => {
    emit('selectPicItem', isSelected, props.cardInfo)
  }
  const changeCurrentImg = currentIndex => {
    currentImgIndex.value = currentIndex
    currentImgInfo.value = polyImgsList.value[currentIndex]
    console.log(currentImgInfo.value)
    initCurrentImgState()
  }
  const initCurrentImgState = () => {
    currentImgState.isSubmitFalse = false
    currentImgState.feedback = ''
    currentImgState.editFlag = false
    currentImgState.textarea = ''
  }
  const scrollUpImgList = () => {
    if (currentImgIndex.value === 0) {
      return
    }
    currentImgIndex.value--
    changeCurrentImg(currentImgIndex.value)
    scrollToCurrentImg()
  }
  const scrollDownImgList = () => {
    if (currentImgIndex.value === polyImgsList.value.length - 1) {
      return
    }
    currentImgIndex.value++
    changeCurrentImg(currentImgIndex.value)
    scrollToCurrentImg()
  }
  const scrollToCurrentImg = () => {
    const listDom = document.querySelector('.imgs-list-wrapper')
    const imgItemDom = document.querySelectorAll('.img-item')
    let scrollTop = imgItemDom[currentImgIndex.value].offsetTop - 120
    listDom.scrollTo({ top: scrollTop, behavior: 'smooth' })
  }
  watch(
    () => props.cardInfo,
    newVal => {
      props.allSelectedFlag ? (isSelect.value = true) : (isSelect.value = false)
      editFlag.value = false
      feedback.value = ''
      textarea.value = ''
      currentImgIndex.value = 0
      currentImgInfo.value = undefined
      currentImgState.isSubmitFalse = false
      currentImgState.feedback = ''
      currentImgState.editFlag = false
      currentImgState.textarea = ''
    },
    {
      deep: true
    }
  )
  watch(
    () => props.allSelectedFlag,
    newVal => {
      if (newVal) {
        if (!isSelect.value) {
          isSelect.value = true
        }
      } else {
        if (isSelect.value) {
          isSelect.value = false
        }
      }
    },
    { immediate: true }
  )
  onMounted(() => {})
  defineExpose({
    cardItemRef,
    viewPolyImgList
  })
</script>

<style scoped lang="scss">
  .time,
  .feedback,
  .device-location {
    display: flex;
    align-items: center;
    margin-bottom: pxTvh(8);
  }
  .time {
    & > span {
      margin-right: pxTvw(16);
    }
    & > span:nth-child(2) {
      color: rgba(207, 219, 252, 0.8);
      margin-right: pxTvw(8);
    }
    & > img {
      cursor: pointer;
      width: pxTvh(16);
      height: pxTvh(16);
      margin-left: auto;
      margin-right: 0;
    }
  }
  .device-location {
    & > span {
      margin-right: pxTvw(16);
    }
    & > span:nth-child(1) {
      color: rgba(207, 219, 252, 0.8);
    }
  }
  .feedback {
    height: pxTvh(20);
    & > div:first-child {
      color: rgba(207, 219, 252, 0.8);
      margin-right: pxTvw(8);
    }
    :deep .el-radio__input + span.el-radio__label {
      color: #e8f3ff;
    }
  }
  .text-area {
    margin-bottom: pxTvh(16);
    & > .title {
      margin-bottom: pxTvh(8);
      color: rgba(207, 219, 252, 0.8);
      display: flex;
      justify-content: space-between;
      & > div:last-child {
        color: #377dff;
        cursor: pointer;
      }
      & > div:first-child {
        color: rgba(207, 219, 252, 0.8);
      }
    }
  }
  .btn-group {
    display: flex;
    justify-content: flex-end;
  }
  .card-item {
    // flex-basis: calc(100% / 5);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: pxTvh(480);
    background: #0d172f;
    padding: pxTvh(16) pxTvw(16);
    box-sizing: border-box;
    color: rgba(232, 243, 255, 1);
    @include computed_font(14);
    & > div {
      width: 100%;
    }
    & > .popup-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(220, 234, 255, 1);
      margin-bottom: pxTvh(16);
      & > .title-text {
        border-left: 4px solid rgba(82, 138, 254, 1);
        padding-left: pxTvw(4);
      }
      & > .title-btn {
        cursor: pointer;
      }
    }
    & > .card-img {
      position: relative;
      height: pxTvh(180);
      background: #1a346a;
      margin-bottom: pxTvh(16);
      & > .cover-img {
        width: 100%;
        height: 100%;
        & > img {
          @include wh100();
        }
      }
      & > .img-icon {
        position: absolute;
        bottom: pxTvh(8);
        right: pxTvw(8);
        display: flex;
        & > img {
          width: pxTvh(16);
          height: pxTvh(16);
          cursor: pointer;
          &:first-child {
            margin-right: pxTvw(8);
          }
        }
      }
      & > .check-box {
        position: absolute;
        top: pxTvh(-4);
        left: pxTvw(8);
        :deep .el-checkbox .el-checkbox__inner {
          background-color: rgba(230, 239, 255, 0.5);
        }
      }
    }
  }
  .pic-dialog {
    width: pxTvw(1200);
    display: flex;
    // flex-flow:column;
    flex-wrap: wrap;
    justify-content: center;

    .img-content {
      width: pxTvw(1168);
      height: pxTvh(657);
      background-color: rgba(255, 255, 255, 0.2);
      margin-top: pxTvh(16);
    }

    .img-content img {
      @include wh100();
    }
    .map-container {
      @include wh100();
    }
  }
  .poly-pic-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: pxTvw(1200);
    height: pxTvh(826);
    & > .img-wrapper {
      width: 100%;
      padding: pxTvh(16) pxTvw(16);
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      height: pxTvh(555);
      & > .img-content {
        width: pxTvw(985);
        height: 100%;
        margin-right: pxTvw(16);
        & > img {
          @include wh100();
        }
      }
      & > .img-list {
        width: pxTvw(166);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: pxTvh(27) 0;
        box-sizing: border-box;
        & > .img-scroll {
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          width: 100%;
          min-height: pxTvh(32);
          background: #19284d;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #2d3e65;
          box-sizing: border-box;
        }
        & > .img-scroll:hover {
          background: #253a6b;
          border: 1px solid #165dff;
        }
        & > .no-hover:hover {
          background: #19284d;
          border: 1px solid #2d3e65;
        }
        & > .imgs {
          margin: pxTvh(16) 0 pxTvh(16) pxTvw(6);
          width: calc(100% + pxTvw(6));
          display: flex;
          flex-direction: column;
          overflow: hidden;
          & > .imgs-list-wrapper {
            position: relative;
            overflow-y: scroll;
            overflow-x: hidden;
            & > .img-item {
              position: relative;
              cursor: pointer;
              width: 100%;
              height: pxTvh(124);
              margin-bottom: pxTvh(16);
              & > img {
                @include wh100();
              }
              & > .img-border {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border: 1px solid #165dff;
              }
            }
            & > .img-item:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
    & > .img-info {
      color: rgb(232, 243, 255);
      margin-left: pxTvw(16);
      margin-right: auto;
      position: relative;
    }
    & > .btn-group {
      margin-right: pxTvw(16);
      margin-left: auto;
    }
  }
</style>
